<!-- 碳足迹研究报告 -->
<template>
  <div class="carbon-report-container">
    <div class="go-home" @click="goHome">
      <el-button size="small" type="primary">返回导航页面</el-button>
    </div>
    <!-- 标题部分 -->
    <div class="header">
      <h2>产品碳足迹报告信息补充</h2>
    </div>
    <el-row :gutter="10">
      <el-col :span="12">
        <!-- 主体内容 -->
        <div class="content">
          <!-- 分配原则部分 -->
          <section class="section">
            <h3 class="section-title">分配原则</h3>
            <el-input
              v-model="form.distributionPrinciple"
              placeholder="输入变异值"
              type="textarea"
              rows="9"
              style="width: 100%; background: #fafafa"
            ></el-input>
          </section>

          <!-- 取舍原则部分 -->
          <section class="section">
            <h3 class="section-title">取舍原则</h3>
            <el-input
              v-model="form.rejectionPrinciple"
              placeholder="输入变异值"
              type="textarea"
              rows="9"
              style="width: 100%; background: #fafafa"
            ></el-input>
          </section>

          <!-- 含异物料部分 -->
          <section class="section">
            <h3 class="section-title">舍弃物料</h3>
            <div class="material-table">
              <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="date" label="物料名称" min-width="180" />
                <el-table-column
                  prop="name"
                  label="物料重量 (kg)"
                  min-width="180"
                />
                <el-table-column prop="address" label="物料重量占比 (%)" />
              </el-table>
            </div>
          </section></div
      ></el-col>
      <el-col :span="12">
        <!-- 敏感性分析部分 -->
        <div class="sensitivity-analysis">
          <h3 class="section-title">敏感性分析</h3>
          <div class="sensitivity-control">
            <el-button
              type="primary"
              size="small"
              :icon="Plus"
              @click="addSensitiveUnit"
              >添加敏感单元</el-button
            >
            <el-input
              v-model="inputVariant"
              placeholder="输入变异值"
              style="width: 150px; margin-left: 10px"
            ></el-input>
          </div>

          <el-table
            :data="sensitiveUnits"
            border
            class="cus-table"
            style="width: 100%; height:100%; margin-top: 15px"
          >
            <el-table-column label="敏感单元" min-width="200">
              <template #default="{ row }">
                <el-select
                  v-model="row.unit"
                  placeholder="选择敏感单元"
                  @change="handleUnitChange(row)"
                >
                  <el-option
                    v-for="option in unitOptions"
                    :key="option"
                    :label="option"
                    :value="option"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="variant" label="变异值 (%)" min-width="150">
              <template #default="{ row }">
                <el-input
                  v-model="row.variant"
                  type="number"
                  @change="handleVariantChange(row)"
                  :min="0"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="change"
              label="碳排放贡献变化 (%)"
              width="180"
            ></el-table-column>
            <el-table-column label="操作" min-width="80">
              <template #default="{ row }">
                <el-icon>
                  <Delete @change="handleVisibilityChange(row)" />
                </el-icon>
              </template>
            </el-table-column>
          </el-table></div
      ></el-col>
    </el-row>

    <div class="bottom-btn">
      <el-button class="cus-btn">预览报告</el-button>
      <el-button class="cus-btn">下载报告</el-button>
    </div>
  </div>
</template>

<script setup>
  import { ref } from "vue";
  import { Plus } from "@element-plus/icons-vue";

  const emit = defineEmits(["goNav"]);
  // 敏感单元数据
  const sensitiveUnits = ref([
    { unit: "", variant: 0, change: 0, visible: true },
    { unit: "", variant: 0, change: 0, visible: true },
  ]);

  // 敏感单元选项
  const unitOptions = ref(["敏感单元1", "敏感单元2", "敏感单元3"]);
  const tableData = ref([]);
  const form = reactive({
    distributionPrinciple:
      "在许多工业流程中,通常存在多个功能或输出,这使得流程产生的环境负荷需要在不同的功能和输出之间进行合理分配,主要有以下几种环境负荷分配方法:a.避免分配; b. 扩大系统边界; c. 以物理因果关系为基准分配环境负荷; d.使用社会经济学分配基准;本系统不产生副产物,因此在本研究中不涉及分配问题。", // 输入变异值

    rejectionPrinciple:
      "本研究采用的取舍规则以各项原材料投入占产品重量或过程总投入的重量比为依据。具体规则如下：1. 普通物料重量＜1%产品重量时，以及含稀贵或高纯成分的物料重量＜0.1%产品重量时，可忽略该物料的上游生产数据；总共忽略的物料重量不超过 5%；2. 低价值废物作为原料，如粉煤灰、矿渣、秸秆、生活垃圾等，可忽略其上游生产数据；3.  任何有毒有害的材料和物质均应包含于清单中，不可截断；4.  原则上应包括与碳足迹影响相关的所有环境排放，但在环境排放数据不可得或缺失的情况下可截断，但应在报告中解释说明。", //取舍原则
  });
  // 输入变异值
  const inputVariant = ref("");

  // 添加敏感单元
  const addSensitiveUnit = () => {
    sensitiveUnits.value.push({
      unit: "",
      variant: 0,
      change: 0,
      visible: true,
    });
  };

  // 处理敏感单元选择变化
  const handleUnitChange = (row) => {
    // 这里可以添加根据选择的单元计算变化值的逻辑
    row.change = 0; // 重置变化值
  };

  // 处理变异值变化
  const handleVariantChange = (row) => {
    // 这里可以添加根据变异值计算碳排放变化值的逻辑
    row.change = row.variant; // 示例逻辑
  };
  //返回导航页面
  const goHome = () => {
    emit("goNav");
  };
  // 处理可见性变化
  const handleVisibilityChange = (row) => {
    // 处理可见性变化的逻辑
  };
</script>

<style lang="scss" scoped>
  .carbon-report-container {
    //max-width: 1200px;
    margin: 0 auto;
    font-family: "Microsoft YaHei", sans-serif;
    .go-home {
      position: absolute;
      top: 0;
      right: 0;
      cursor: pointer;
    }
  }

  .header {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
  }
  .bottom-btn {
    width: 100%;
    text-align: center;
    padding-top: 15px;
    .cus-btn{
      width: 100px;
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      background: #5cc4a7;
    }
  }

  h2 {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 0;
  }

  .content {
    //display: flex;
    padding: 0 20px;
  }

  .section {
    flex: 1;
    padding-right: 30px;
  }

  .section-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
  }

  .section-content {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
  }

  .rule-list {
    margin-top: 10px;
    list-style-position: inside;
  }

  .material-table {
    margin-top: 15px;
  }

  .sensitivity-analysis {
    flex: 0 0 350px;
    padding: 0 20px;
    height: calc(-14rem + 100vh);
    border-left: 1px solid #eee;
    overflow: hidden;
  }

  .sensitivity-control {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }
  .cus-table{
    position: relative;
    overflow: hidden;
    height: fit-content;
    box-sizing: border-box;
  }

  ::v-deep .el-table th {
    background-color: #f5f7fa;
  }

  ::v-deep .el-table__body tr:hover > td {
    background-color: #f0f9ff;
  }
</style>
